<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('签到详情')" />
</head>
<style>
    .top-panel {border:1px solid #eceff9;border-radius:5px;text-align:center;}
    .top-panel > .panel-body {height:100px;}
    .top-panel-number {line-height:60px;font-size:30px;border-right:1px solid #eceff9;}
    .top-panel-tips {line-height:30px;font-size:14px;font-weight: bold}
    .top-panel > .layui-card-header > h4{font-weight: bold}
</style>
<body class="gray-bg">
<div class="container-div">
    <!--签到信息-->
    <div class="row">
        <div class="col-sm-8" style="margin: 0">
            <div class="panel panel-default top-panel">
                <div class="panel-heading">
                    <h4>课程信息</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-6" style="border-right:1px solid #eceff9;">
                            <h4>任课教师： <span id="teacherName">[[${teacher.name}]]</span></h4>
                            <h4>课程名称：<span id="courseName">[[${course.name}]]</span></h4>
                        </div>
                        <div class="col-xs-6">
                            <h4>教室地点： <span id="classroomLocation">[[${classroom.location}]]</span></h4>
                            <h4>签到时间： <span id="checkinDate"><span th:text="${#dates.format(checkin.starttime, 'MM-dd HH:mm')}"></span> - <span th:text="${#dates.format(checkin.finishtime, 'MM-dd HH:mm')}"></span></span></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-default top-panel">
                <div class="panel-heading">
                    <h4>人数详情</h4>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-7 top-panel-number">
                            <span id="attend_total">[[${checkin.totalNum}]] / [[${checkin.attendNum}]]</span>
                        </div>
                        <div class="col-xs-5 top-panel-tips">
                            实到 <a style="color: #bd3004" id="attendNum">[[${checkin.attendNum}]]</a><br>
                            应到 <a style="color: #1aa094" id="totalNum">[[${checkin.totalNum}]]</a><br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 select-table table-bordered">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var academyDatas = [[${@dict.getType('edu_academy_type')}]];
    var genderDatas = [[${@dict.getType('sys_user_sex')}]];
    var checkinStatusDatas = [[${@dict.getType('edu_checkin_student_status')}]];
    var checkId = [[${checkin.id}]];
    var prefix = ctx + "education/checkin";

    $(function() {
        var options = {
            url: prefix + "/"+checkId+"/student/list",
            modalName: "学生档案管理",
            showSearch:false,
            columns: [
                {
                    field: 'id',
                    title: '学生学号',
                    visible: false
                },
                {
                    field: 'name',
                    title: '学生姓名'
                },
                {
                    field: 'academy',
                    title: '所属学院',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(academyDatas, value);
                    }
                },
                {
                    field: 'gender',
                    title: '性别',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(genderDatas, value);
                    }
                },
                {
                    field: 'checkinStatus',
                    title: '签到',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(checkinStatusDatas, value);
                    }
                }]
        };
        $.table.init(options);
    });
</script>
</body>
</html>